<!DOCTYPE html>
{% load staticfiles %}
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>个人介绍</title>

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/fontAwesome.css' %}">
        <link rel="stylesheet" href="{% static 'css/light-box.css' %}">
        <link rel="stylesheet" href="{% static 'css/templatemo-main.css' %}">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

        <script src="{% static 'js/vendor/modernizr-2.8.3-respond-1.4.2.min.js' %}"></script>
    </head>

<body>
    
    <div class="sequence">
  
      <div class="seq-preloader">
        <svg width="39" height="16" viewBox="0 0 39 16" xmlns="http://www.w3.org/2000/svg" class="seq-preload-indicator"><g fill="#F96D38"><path class="seq-preload-circle seq-preload-circle-1" d="M3.999 12.012c2.209 0 3.999-1.791 3.999-3.999s-1.79-3.999-3.999-3.999-3.999 1.791-3.999 3.999 1.79 3.999 3.999 3.999z"/><path class="seq-preload-circle seq-preload-circle-2" d="M15.996 13.468c3.018 0 5.465-2.447 5.465-5.466 0-3.018-2.447-5.465-5.465-5.465-3.019 0-5.466 2.447-5.466 5.465 0 3.019 2.447 5.466 5.466 5.466z"/><path class="seq-preload-circle seq-preload-circle-3" d="M31.322 15.334c4.049 0 7.332-3.282 7.332-7.332 0-4.049-3.282-7.332-7.332-7.332s-7.332 3.283-7.332 7.332c0 4.05 3.283 7.332 7.332 7.332z"/></g></svg>
      </div>
      
    </div>
    
  
        <nav>
          <div class="logo">
              <img src="{% static 'img/logo.png' %}" alt="">
          </div>
          <div class="mini-logo">
              <img src="{% static 'img/mini_logo.png' %}" alt="">
          </div>
          <ul>
            <li><a href="#1"><i class="fa fa-home"></i> <em>主页</em></a></li>
            <li><a href="#2"><i class="fa fa-user"></i> <em>个人介绍</em></a></li>
            <li><a href="#3"><i class="fa fa-pencil"></i> <em>个人项目</em></a></li>
            <li><a href="#4"><i class="fa fa-image"></i> <em>技术栈</em></a></li>
          </ul>
        </nav>
        
        <div class="slides">
          <div class="slide" id="1">
            <div class="content first-content">
              <div class="container-fluid">
                  <div class="col-md-3">
                      {% for row in my_info %}
                      <div class="author-image"><img src="{{MEDIA_URL}}{{row.desc_img}}" alt=""></div>
                  </div>
                  <div class="col-md-9">
                      <h2>{{row.name}}</h2>
                      <p>{{row.desc}}</p>
                      
                      <p>手机号：13650098286（同微信号） </p>
                      <p>邮箱:1018596741@qq.com</p>
                      <div class="fb-btn"><a href="https://github.com/ChrisLee0211" target="_blank">Git</a></div>
                      <div class="fb-btn"><a href="https://blog.csdn.net/weixin_42833042" target="_blank">My Blog</a></div>
                  </div>
                  {% endfor %}
              </div>
            </div>
          </div>
          <div class="slide" id="2">
            <div class="content second-content">
                <div class="container-fluid">
                    <div class="col-md-6">
                       
                        <div class="left-content">
                            {% for row in my_info %}
                            {% autoescape off %}
                                 <p>{{row.about_me}}</p>
                            {% endautoescape %}
                            {% endfor %}
                           
        <!--
                            <p>Please tell your friends about templatemo website. A variety of free CSS templates are available for immediate downloads.</p> 
                            <p>Phasellus vitae faucibus orci. Etiam eleifend orci sed faucibus semper. Cras varius dolor et augue fringilla, eu commodo sapien iaculis. Donec eget dictum tellus. <a href="#">Curabitur</a> a interdum diam. Nulla vestibulum porttitor porta.</p>
                            <p>Nulla vitae interdum libero, vel posuere ipsum. Phasellus interdum est et dapibus tempus. Vestibulum malesuada lorem condimentum mauris ornare dapibus. Curabitur tempor ligula et <a href="#">placerat</a> molestie.</p>
                            <p>Aliquam efficitur eu purus in interdum. <a href="#">Etiam tincidunt</a> magna ex, sit amet lobortis felis bibendum id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        -->                  
                            
                      </div>
                    </div>
                    <div class="col-md-6">
                        <div class="right-image">
                          <img src="{% static 'img/about_image.jpg' %}" alt="">
                      </div>
                    </div>
                </div>
            </div>
          </div>
          
          <div class="slide" id="3">
            <div class="content third-content">
                <div class="container-fluid">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="first-section">
                                {% for row in my_project %}
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="left-content">
                                                <h2>{{row.name}}</h2>
                                                <p>{{row.desc}}</p>
                                                <p>平台页面：
                                                <div class="fb-btn"><a href="{% url 'index' %}" target="_blank">点击进入</a></div>
                                                </p><br>
                                                <p>后台页面：
                                                <div class="fb-btn"><a href="/xadmin" target="_blank">点击进入</a></div>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="right-image">
                                                <img src="{{MEDIA_URL}}{{row.img}}" alt="first service">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="second-section">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="left-image">
                                                <img src="{% static 'img/second_service.jpg' %}" alt="second service">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="right-content">
                                                <h2>简便电商在线平台框架</h2>
                                                <p>开发中... </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="tlinks">灵感 <a href="#"  title="网站模板">源于生活</a></div>
          <div class="slide" id="4">
              <div class="content second-content">
                <div class="container-fluid">
                    <div class="col-md-6">
                       
                        <div class="left-content">
                           
                           
                            {% for row in skill_detail %}
                            
                            {% autoescape off %}
                                  <p>{{row.detail}} </p>
                            {% endautoescape %}
                            
                          
                            {% endfor %}
                      </div>
                    </div>
                    <div class="col-md-6">
                        <div class="right-image">
                          <img src="{% static 'img/about_image2.jpg' %}" alt="">
                      </div>
                    </div>
                </div>
            </div>
              <!--
            <div class="content fourth-content">
                <div class="container-fluid">
                    <div class="row">
                        {% for row in my_Skill %}
                        <div class="col-md-4 col-sm-6">
                            <div class="item">
                                <div class="thumb">
                                    <a href="{{MEDIA_URL}}{{row.img}}" data-lightbox="image-1"><div class="hover-effect">
                                        <div class="hover-content">
                                            <h2>{{row.name}}</h2>
                                            <p>{{row.desc}}</p>
                                        </div>
                                    </div></a>
                                    <div class="image">
                                        <img src="{{MEDIA_URL}}{{row.img}}">
                                    </div>
                                </div>
                            </div>
                        </div>
                       {% endfor %}
                    </div>
                </div>
            </div>
          </div>
          -->
          
        </div>

        <div class="footer">
          <div class="content">
              <p>Copyright &copy; 2018 Your Company . <a href="#">Moonlight</a> by <a href="#" target="_parent">HTML5 Max</a></p>
          </div>
        </div>

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="{% static 'js/vendor/jquery-1.11.2.min.js' %}"><\/script>')</script>

    <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
    
    <script src="{% static 'js/datepicker.js' %}"></script>
    <script src="{% static 'js/plugins.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        

        // navigation click actions 
        $('.scroll-link').on('click', function(event){
            event.preventDefault();
            var sectionID = $(this).attr("data-id");
            scrollToID('#' + sectionID, 750);
        });
        // scroll to top action
        $('.scroll-top').on('click', function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop:0}, 'slow');         
        });
        // mobile nav toggle
        $('#nav-toggle').on('click', function (event) {
            event.preventDefault();
            $('#main-nav').toggleClass("open");
        });
    });
    // scroll function
    function scrollToID(id, speed){
        var offSet = 0;
        var targetOffset = $(id).offset().top - offSet;
        var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop:targetOffset}, speed);
        if (mainNav.hasClass("open")) {
            mainNav.css("height", "1px").removeClass("in").addClass("collapse");
            mainNav.removeClass("open");
        }
    }
    if (typeof console === "undefined") {
        console = {
            log: function() { }
        };
    }
    </script>
</body>
</html>